<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="./js/vue-router_3.0.2.js"></script>

    <!-- 
        1、导入router.js文件
        2、编写路由链接地址=====router-link
        3、准备显示组件的地方====坑位====router-view

        4、创建组件
        5、创建路由匹配规则=====匹配路由链接地址成功===就显示对应的组件
        6、挂载router实例vm对象
     -->
</head>
<body>
    <div id='app'>
        {{msg}}
        <hr>
        <!--  2、编写路由链接地址=====router-link -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <!-- 3、准备显示组件的地方====坑位====router-view -->
        <router-view></router-view>
    </div>
    <script type='text/javascript'>
        /* 4、创建组件 */
        var  login={
            template:`
                <div>
                    <h1>我司登录页面===login</h1>
                    </div>
            `
        }
        var  register={
            template:`
                <div>
                    <h1>我是注册页面===register</h1>

                    <router-link to="/tab1">tab1</router-link>
                    <router-link to="/tab2">tab2</router-link>
                    <hr>
                    <router-view></router-view>
                </div>
            `
        }

        var  tab1={
            template:`
                <div>
                    <h1>我是register页面中的====tab1</h1>
                </div>
            `
        }

        var  tab2={
            template:`
                <div>
                    <h1>我是register页面中的====tab2</h1>
                </div>
            `
        }


        /* 5、创建路由匹配规则=====匹配路由链接地址成功===就显示对应的组件 */
        var  router=new  VueRouter({
            routes:[
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register',component:register,children:[
                    {path:'/tab1',component:tab1},
                    {path:'/tab2',component:tab2}
                ]},

                
            ]
        })

        /* 6、挂载router实例vm对象 */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            router
        });
    </script>
</body>
</html>